<template>
	<view class="container">
		<scroll-view scroll-x="true" class="top-menu-wrapper">
			<view class="top-menu">
				<!-- -1.历史订单 0.待支付 1.待发货 2.待收货 3.待评价
				4交易关闭 5正在退款 6交易取消 7已退款 8正在退货 9已退货 10已完成 -->
				<view class="menu-item" :class="{'on': status == 1}" @click="selectStatus(1)">已支付</view>
				<view class="menu-item" :class="{'on': status == 0}" @click="selectStatus(0)">待支付</view>
				<view class="menu-item" :class="{'on': status == -1}" @click="selectStatus(-1)">历史订单</view>
			</view>
		</scroll-view>
		<view class="place"></view>
		<view class="null-wrapper" v-if="list.length < 1 && isLoad">
			<image src="/static/order-null.png" class="icon"></image>
			<view class="desc">小主，您还没有订单呢~</view>
		</view>
		<view class="list" v-if="list.length > 0">
			<uni-swipe-action>
				<uni-swipe-action-item v-for="order in list"
					:disabled="order.status != 4 && order.status != 6 && order.status != 9 && order.status != 10"
					:right-options="options" @click="handleDeleteOrder" @change="swipeChange(order.id)" :key="order.id">
					<view class="item" @click.native.stop="details(order.id)">
						<view class="top-wrapper">
							<view class="store-infor" @click.native.stop="store(order.shopId)">
								<image src="/static/seller.png" class="icon"></image>
								<view class="name ell">{{order.shopName}}</view>
								<image src="/static/next04.png" class="next"></image>
							</view>
							<!-- 订单状态 0.待支付 1.待发货 2.待收货 3.待评价
							4交易关闭 5正在退款 6交易取消 7已退款 8正在退货 9已退货 10已完成 -->
							<view class="status on" v-if="order.status == 0">待支付</view>
							<view class="status on" v-if="order.status == 1">已支付</view>
							<view class="status on" v-if="order.status == 2">待收货</view>
							<view class="status on" v-if="order.status == 3">待评价</view>
							<view class="status" v-if="order.status == 4">交易关闭</view>
							<view class="status on" v-if="order.status == 5">正在退款</view>
							<view class="status" v-if="order.status == 6">交易取消</view>
							<view class="status" v-if="order.status == 7">已退款</view>
							<view class="status on" v-if="order.status == 8">正在退货</view>
							<view class="status" v-if="order.status == 9">已退货</view>
							<view class="status" v-if="order.status == 10">已完成 </view>
						</view>
						<view class="product-list">
							<view class="product-item" v-for="product in order.items" :key="product.productId">
								<image :src="product.productImage" mode="aspectFill" class="img"></image>
								<view class="text">
									<view class="name ell">{{product.productName}}</view>
									<view class="specifications ell" v-if="product.normal">{{product.normal}}</view>
								</view>
								<view class="text price-num">
									<view class="name price">¥{{product.price}}</view>
									<view class="specifications num">共 {{product.num}} 件</view>
								</view>
							</view>
						</view>
						<view class="bottom-wrapper">
							<!-- 订单状态 0.待支付 1.待发货 2.待收货 3.待评价
							4交易关闭 5正在退款 6交易取消 7已退款 8正在退货 9已退货 10已完成 -->
							<template v-if="order.status == 0">
								<view class="btn on" @click.native.stop="togglePopup(order.id, order.type)"
									v-if="order.type!==5">立即付款</view>
								<view class="btn" @click.native.stop="handleCancelOrder(order.id)">取消订单</view>
							</template>

							<!-- <template v-if="order.status == 1">
								<view class="btn on" v-if="order.type == 1 || order.type == 2 || order.type == 3 || order.type == 4" @click.native.stop="afterSales(order.id)">退款</view>
							</template> -->
							<template v-if="order.status == 2">
								<view class="btn on" @click.native.stop="handleConfirmGet(order.id)">确认收货</view>
							</template>
							<template v-if="order.status == 2 || order.status == 3  || order.status == 10">
								<!-- <view class="btn on" v-if="order.type == 1 || order.type == 2 || order.type == 3" @click.native.stop="afterSales(order.id)">退货</view> -->
								<view class="btn on" v-if="order.type == 1 || order.type == 2 "
									@click.native.stop="expressInfo(order.expressNo)">查看物流</view>
							</template>
							<template v-if="order.status == 5 || order.status == 8">
								<view class="btn on" @click.native.stop="handleCancelRefund(order.orderRefund.id)">取消退款
								</view>
							</template>
							<template v-if="order.orderRefund.status == 1">
								<view class="btn on" @click.native.stop="express(order.id)">填写单号</view>
							</template>
							<template v-if="order.status == 10 || order.status == 6 || order.status == 4">
								<button class="btn" @click.native.stop="cancleOrder(order.id)">删除订单</button>
							</template>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		<view class='end' v-if="loadingFinsh && list.length > 0">没有更多了</view>
		<payment-method :submitFlag="submitFlag" :orderId="orderId" :isPopupShow="isPopupShow"
			:payMethod.sync="payMethod" @togglePopup="togglePopup" @handleConfirmPay="handleConfirmPay">
		</payment-method>
		<cancel-reason :isPopupShow="isReasonShow" :orderId="orderId" @togglePopup="toggleReasonPopup"
			@handleSure="handleSureCancle"></cancel-reason>
	</view>
</template>

<script>
	import {
		fontPage,
		confirmPay,
		deleteOrder,
		cancelOrder
	} from '@/api/order.js'
	import payment from '@/mixins/payment.js'
	import handle from '@/mixins/orderHandle.js'
	import paymentMethod from '@/components/payment-method/index.vue'
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	import CancelReason from '@/components/CancelReason/CancelReason.vue'
	export default {
		mixins: [payment, handle],
		components: {
			paymentMethod,
			uniSwipeAction,
			uniSwipeActionItem,
			CancelReason
		},
		data() {
			return {
				isOrderHandle: false,
				isReasonShow: false,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#EA5745'
					}
				}],
				status: 1,
				list: [],
				isLoad: false,
				loadingFinsh: false,
				loadingShow: false,
				totalCount: 0,
				isFinish:false,
				pageNum: 1,
				pageSize: 10,
				isPopupShow: false,
				payMethod: '',
				orderId: '',
				productType: '', // 1积分商品
				submitFlag: false
			}
		},
		onLoad(option) {
			if (option.orderStatus) {
				this.status = option.orderStatus
			}
			this.getList()
		},
		onShow() {
			if (!this.isOrderHandle) {
				return
			}
			this.isOrderHandle = false
			this.selectStatus(this.status)
		},
		onPullDownRefresh() {
				this.totalCount=0
				this.pageNum =1
				this.isFinish= false
				this.list= []
				this.getList()
				setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onReachBottom() {
			this.pageNum = this.pageNum + 1
			this.getList()
		},
		methods: {
			cancleOrder(orderId) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除该订单？删除后将不可恢复。',
					success: function(res) {
						if (res.confirm) {
							deleteOrder({
								orderId
							}).then(respanse => {
								that.selectStatus(that.status, 1)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			express(id) {
				uni.navigateTo({
					url: `/pages/order/express?orderId=${id}`
				})
			},
			handleDeleteOrder(e) {
				console.log('dele')
				const that = this
				uni.showModal({
					title: '提示',
					content: '确定删除该订单？删除后将不可恢复。',
					success: function(res) {
						if (res.confirm) {
							deleteOrder({
								orderId: that.deleteOrderId
							}).then(respanse => {
								that.selectStatus(that.status)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			swipeChange(id) {
				this.deleteOrderId = id
			},
			getList() {
				console.log('xxxx')
				if (this.isFinish && this.isLoad) {
					this.loadingFinsh = true,
					this.loadingShow = false
					return
				}
				this.loadingShow = true
				//  -1.历史订单 0.待支付 1.待发货 2.待收货 3.待评价
				// 4交易关闭 5正在退款 6交易取消 7已退款 8正在退货 9已退货 10已完成
				const data = {
					status: this.status,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				fontPage(data).then(respanse => {
					const {
						rows,
						total
					} = respanse.result
					if (rows) {
						this.list = this.list.concat(rows)
					}
					if(this.list.length === total){
						this.isFinish = true
					}
					this.totalCount = total
					this.isLoad = true
					this.loadingShow = false
				})
			},

			// 去付款(选择支付方式)
			togglePopup(orderId, type) {
				this.isPopupShow = !this.isPopupShow
				if (orderId) {
					this.orderId = orderId
				}
				if (type) {
					this.productType = type
				}
			},
			// 取消退款退货申请回调
			cancelRefundCallback() {
				this.selectStatus(this.status)
			},

			// 取消订单回调
			// cancelOrderCallback() {
			// 	this.selectStatus(this.status)
			// },

			toggleReasonPopup() {
				this.isReasonShow = !this.isReasonShow
			},

			handleSureCancle(reason, orderId) {
				cancelOrder({
					orderId,
					cancelReason: reason
				}).then(respanse => {
					this.isReasonShow = false
					// this.selectStatus(this.status)
					const data = {
						status: this.status,
						pageNum: 1,
						pageSize: 10
					}
					fontPage(data).then(respanse => {
						const {
							rows,
							total
						} = respanse.result
						if (rows) {
							this.list = rows
						}
					if(this.list.length === total){
						this.isFinish = true
					}
						this.totalCount = total
						this.isLoad = true
						this.loadingShow = false
					})
				})
			},

			// 取消订单
			handleCancelOrder(orderId) {
				const that = this
				that.orderId = orderId
				uni.showModal({
					title: '提示',
					content: '确定取消订单？',
					success: function(res) {
						if (res.confirm) {
							that.isReasonShow = true
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},

			// 确认收货回调
			confirmGetCallback() {
				this.selectStatus(this.status)
			},

			// 去付款
			handleConfirmPay() {
				if (!this.payMethod) {
					uni.showToast({
						title: '请选择支付方式！',
						icon: 'none',
						duration: 2000
					})
					return
				}
				const data = {
					orderId: this.orderId,
					payMethod: this.payMethod
				}
				this.submitFlag = true
				confirmPay(data).then(respanse => {
					this.createOrderDetails = respanse.result
					if (this.productType == 1) {
						this.payment(2, true) // 2积分类型区分支付成功页面
					} else if (this.productType == 5) {
						this.payment(1, true, true) // 自助机商品
					} else {
						this.payment(1, true)
					}
					this.submitFlag = false
				}).catch(err => {
					this.submitFlag = false
				})
			},

			selectStatus(status, num) {
				if (num) {
					this.status = status
					this.list = []
					this.isLoad = false
					this.loadingFinsh = false
					this.loadingShow = false
					this.isFinish = false
					this.totalCount = 0
					this.pageNum = 1
					this.getList()
				}
				if (this.status != status) {
					this.status = status
					this.list = []
					this.isLoad = false
					this.loadingFinsh = false
					this.loadingShow = false
					this.isFinish = false
					this.totalCount = 0
					this.pageNum = 1
					this.getList()
				}

			},


			store(id) {
				if (id == 0) {
					uni.reLaunch({
						url: '/pages/special-price-mall/index'
					})
				} else {
					uni.reLaunch({
						url: `/pages/store/index?shopId=${id}`
					})
				}
			},

			details(id) {
				uni.navigateTo({
					url: `/pages/order/details?orderId=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.null-wrapper {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 643rpx;
		height: 477rpx;

		.icon {
			width: 100%;
			height: 100%;
		}

		.desc {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 86rpx;
			line-height: 40rpx;
			text-align: center;
			font-size: 30rpx;
			color: #6C7586;
			opacity: 0.5;
		}
	}

	.top-menu-wrapper {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 2;
		background-color: #F5F5F5;
	}

	.top-menu {
		display: flex;

		.menu-item {
			position: relative;
			padding: 31rpx 23rpx 25rpx;
			white-space: nowrap;
			line-height: 42rpx;
			font-size: 32rpx;
			color: #000000;

			&.on::after {
				content: " ";
				position: absolute;
				left: 51rpx;
				right: 51rpx;
				bottom: 0;
				border-bottom: 2px solid #ED602B;
			}
		}
	}

	.cancelBtn {
		position: absolute;
		right: 175rpx;
		top: 42rpx;
		font-size: 25rpx;
		background-color: transparent;
	}

	.place {
		height: 98rpx;
		visibility: hidden;
	}

	.item {
		padding: 13rpx 23rpx 32rpx 34rpx;
		margin: 20rpx 25rpx;
		background: #FFFFFF;
		border-radius: 10rpx;

		.top-wrapper {
			display: flex;
			justify-content: space-between;

			.store-infor {
				display: flex;
				align-items: center;
				padding: 22rpx 0;

				.icon {
					width: 34rpx;
					height: 35rpx;
				}

				.name {
					margin-left: 16rpx;
					max-width: 400rpx;
					line-height: 35rpx;
					font-size: 30rpx;
					color: #333333;
				}

				.next {
					margin-left: 16rpx;
					width: 12rpx;
					height: 20rpx;
				}
			}

			.status {
				line-height: 79rpx;
				font-size: 26rpx;
				color: #999999;

				&.on {
					color: #ED602B;
				}
			}
		}

		.product-item {
			display: flex;
			padding: 10rpx 0;

			.img {
				width: 156rpx;
				height: 156rpx;
				border-radius: 10rpx;
				background-color: #F5F5F5;
			}

			.text {
				flex: 1;
				margin-left: 39rpx;
				padding-top: 38rpx;
				overflow: hidden;

				.name {
					line-height: 38rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #080808;
				}

				.specifications {
					margin-top: 12rpx;
					line-height: 32rpx;
					font-size: 22rpx;
					color: #818181;
				}
			}

			.price-num {
				flex: 0 0 auto;
				margin-left: 20rpx;
				text-align: right;
			}
		}

		.bottom-wrapper {
			display: flex;
			flex-direction: row-reverse;

			.btn {
				margin: 11rpx 0 0 30rpx;
				width: 176rpx;
				height: 62rpx;
				box-sizing: border-box;
				line-height: 62rpx;
				text-align: center;
				font-size: 26rpx;
				color: #ED602B;
				border: 1px solid #ED602B;
				border-radius: 31rpx;

				&.on {
					color: #fff;
					background: linear-gradient(-90deg, #ED602B, #F19136);
					border: none;
				}
			}
		}
	}
</style>
